﻿<div id="admin_role" class="page" v-cloak>
    <Tabs ref="tabs" v-model="currentTab">
        <TabPane label="角色管理">
            <datagrid ref="roles" :columns="roleColumns" :edit="editSetting" :dateable="false" url="@ViewBag.RoleDataUrl"></datagrid>
        </TabPane>
        <TabPane label="权限管理">
            <datagrid :columns="permissionColumns" :edit="permissionEditSetting" :dateable="false" :url="'@ViewBag.DataUrl'"></datagrid>
        </TabPane>
    </Tabs>
    <Modal title="权限设置" v-model="modalPermission" ok-text="更新权限" @@on-ok="updatePermission">
        <div class="am-g">
            <div class="am-u-md-6">
                <div class="box box-info">
                    <div class="box-header with-border">
                        <i class="am-icon-user"></i>
                        <h3 class="box-title">请勾选子权限</h3>
                    </div>
                    <div class="box-body">
                        <Tree url="@ViewBag.TreeUrl" ref="treeqx" show-checkbox></Tree>
                    </div>
                </div>
            </div>
            <div class="am-u-md-6">
                <div class="box box-info col-md-6">
                    <div class="box-header with-border">
                        <i class="am-icon-list"></i>
                        <h3 class="box-title">请勾选菜单权限</h3>
                    </div>
                    <div class="box-body">
                        <Tree url="@ViewBag.MenuUrl" ref="treemenu" show-checkbox></Tree>
                    </div>
                </div>
            </div>
        </div>
    </Modal>
</div>
@section script {
    <script>
        var _editRole = null;
    var vm = new Vue({
        el: '#admin_role',
        data: {
            currentTab: 0,
            editSetting: { showAdd: true, delUrl: '@ViewBag.RoleDelUrl', saveUrl: '@ViewBag.RoleSaveUrl', autoload: true },
            permissionEditSetting: {showAdd:true,delUrl:'@ViewBag.DelUrl',saveUrl:'@ViewBag.SaveUrl',autoload:true},
            modalPermission: false,
            showPermission: function (id) {
                _editRole = this.$refs.roles.getData(id);
                this.$refs.treeqx.setCheckedNodes(_editRole.Permissions);
                this.$refs.treemenu.setCheckedNodes(_editRole.Menus);
                this.modalPermission = true;
            },
            updatePermission() {
                var self = vm;
                let data = { id: _editRole.Id, permissions: self.$refs.treeqx.getCheckedIds(), menus: self.$refs.treemenu.getCheckedIds() };
                $.post('@ViewBag.SetPermissionUrl', data, function (result) {
                    if (result.succ) {
                        self.$refs.roles.reload();
                        self.modalPermission = false;
                        self.$Message.success("权限更新成功！");
                    } else {
                        alert(result.data);
                    }
                });
            },
            roleColumns: [
                { bind: 'Id', title: '编号', editor: { type: 'text' } },
                { bind: 'Name', title: '角色名称', editor: { type: 'text' } },
                {
                    bind: 'Permissions', title: '权限设置', format: function (val, data) {
                        if (!val) return "";
                        _editRole = data;
                        return '<a onclick="vm.showPermission(' + data.Id + ')">配置权限</a>';
                    }
                },
                { bind: 'LastModify', title: '最后修改时间' }
            ],
            permissionColumns: [
                { bind: 'Id', title: '编号', editor: { type: 'text' } },
                { bind: 'Name', title: '权限名称', editor: { type: 'text' } },
                { bind: 'LastModify', title: '最后修改时间' }
            ]
        }
        });
    </script>
}